import React, { useState, useEffect } from 'react';
import { connect } from 'dva';
import { Row, Col, Form, Input, Select, Modal, Spin, Radio} from 'antd';
import {getDataDictValues} from '@/utils/utils';

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 8 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};

// 判断空对象
const isEmptyObject = obj => {
  if (Object.keys(obj).length === 0) {
    return true;
  }
  return false;
};

const namespace = 'busiComponent';

function BusiElementAdd(props) {
  const { getFieldDecorator } = props.form;
  const [componentTypelist, setComponentTypeList] = useState([]); // 组件类型
  const [spinning] = useState(false);

  // 获取属性值列表
  const getComponentTypeList = async () => {
    let temp;
    await getDataDictValues({busiObjNbr: 'Element', attrNbr: 'COMPONENT_TYPE'}).then(res => {
      temp = res;
    });
    setComponentTypeList(temp);
  };

  const initData = () => {
    getComponentTypeList();
    if (props.selectBusiElement !== undefined && !isEmptyObject(props.selectBusiElement)) {
      const showFlag = props.selectBusiElement.showFlag === null || props.selectBusiElement.showFlag === undefined ? 1 : props.selectBusiElement.showFlag;
      props.form.setFieldsValue({
        busiObjId: props.selectBusiElement.busiObjId,
        busiObjAttrId: props.selectBusiElement.busiObjAttrId,
        attrName: props.selectBusiElement.attrName,
        attrNbr: props.selectBusiElement.attrNbr,
        attrId: props.selectBusiElement.attrId,
        elementName: props.selectBusiElement.elementName || props.selectBusiElement.attrName,
        elementCode: props.selectBusiElement.elementCode || props.selectBusiElement.attrNbr,
        componentType: props.selectBusiElement.componentType || 'Input',
        defaultValue: props.selectBusiElement.defaultValue,
        requiredFlag: props.selectBusiElement.requiredFlag || 0,
        readOnlyFlag: props.selectBusiElement.readOnlyFlag || 0,
        showFlag,
      });
    }
    return null;
  }

  useEffect(() => {
    initData();
  },[props.busiElementAddType]);

  // dva 保存编辑组件元素弹窗展示/隐藏标识
  const saveBusiElementAddVisibleFlag = params => {
    const { dispatch } = props;
    dispatch({
      type: `${namespace}/saveBusiElementAddVisibleFlag`,
      payload: params,
    });
  };

  // dva 保存组件元素列表数据
  const saveBusiElementAddList = params => {
    const {dispatch} = props;
    dispatch({
      type: `${namespace}/saveBusiElementAddList`,
      payload: params,
    });
  };

  // dva 保存对象组件新增类型
  const saveBusiElementAddType = params => {
    const {dispatch} = props;
    dispatch({
      type: `${namespace}/saveBusiElementAddType`,
      payload: params,
    });
  };

  const handleOk = () => {
    props.form.validateFields((err, formData) => {
      if (err) return;
      props.busiElementAddList.map((item, index, array) => {
        if (item.attrId === formData.attrId) {
          const tempValue = Object.assign(item, formData);
          // 取组件类型名称
          tempValue.componentTypeName = componentTypelist.filter((item0) => {
            return item0.attrValue === tempValue.componentType
          })[0].attrValueName;
          array[index] = tempValue;
        }
        return null;
      });
      const tempElementAddList = [...props.busiElementAddList];
      saveBusiElementAddList(tempElementAddList);
      saveBusiElementAddVisibleFlag(false);
      saveBusiElementAddType('');
    });
  };

  const handleCancel = () => {
    saveBusiElementAddVisibleFlag(false);
    saveBusiElementAddType('');
  };

  return (
    <Modal
      title='编辑组件元素'
      visible={props.modalVisible}
      width="70%"
      destroyOnClose
      onCancel={() => {
        handleCancel();
      }}
      onOk={() => {
        handleOk();
      }}
    >
      <Spin spinning={spinning}>
        <Form>
          <Row>
            <Col span={12}>
              <Form.Item label="属性名称" {...formItemLayout}>
                {getFieldDecorator('attrName')(
                  <Input
                    disabled
                    maxLength={20}
                  />
                )}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="属性编码" {...formItemLayout}>
                {getFieldDecorator('attrNbr')(
                  <Input
                    disabled
                    maxLength={20}
                  />
                )}
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col span={12}>
              <Form.Item label="元素名称" {...formItemLayout}>
                {getFieldDecorator('elementName', {
                  rules: [
                    {
                      required: true,
                      message: '元素名称不能为空',
                    },
                  ],
                })(
                  <Input
                    placeholder="请输入元素名称"
                    maxLength={30}
                  />
                )}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="元素编码" {...formItemLayout}>
                {getFieldDecorator('elementCode', {
                  rules: [
                    {
                      required: true,
                      message: '元素编码不能为空',
                    },
                  ],
                })(
                  <Input
                    placeholder="请输入元素编码"
                    maxLength={50}
                  />
                )}
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col span={12}>
              <Form.Item label="组件类型" {...formItemLayout}>
                {getFieldDecorator('componentType')(
                  <Select
                    style={{width: '100%'}}
                    showSearch
                    allowClear
                  >
                    {componentTypelist.length
                      ? componentTypelist.map(item => {
                        return (
                          <Select.Option value={item.attrValue}>
                            {item.attrValueName}
                          </Select.Option>
                        );
                      })
                      : null}
                  </Select>
                )}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="默认值" {...formItemLayout}>
                {getFieldDecorator('defaultValue')(
                  <Input
                    maxLength={10}
                    placeholder="请输入默认值"
                  />
                )}
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col span={12}>
              <Form.Item label="是否必填" {...formItemLayout}>
                {getFieldDecorator('requiredFlag')(
                  <Radio.Group>
                    <Radio value={1}>是</Radio>
                    <Radio value={0}>否</Radio>
                  </Radio.Group>
                )}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="是否只读" {...formItemLayout}>
                {getFieldDecorator('readOnlyFlag')(
                  <Radio.Group>
                    <Radio value={1}>是</Radio>
                    <Radio value={0}>否</Radio>
                  </Radio.Group>
                )}
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col span={12}>
              <Form.Item label="是否显示" {...formItemLayout}>
                {getFieldDecorator('showFlag')(
                  <Radio.Group>
                    <Radio value={1}>是</Radio>
                    <Radio value={0}>否</Radio>
                  </Radio.Group>
                )}
              </Form.Item>
            </Col>
          </Row>
          <Row style={{display: 'none'}}>
            <Col span={1}>
              <Form.Item label="业务对象Id" {...formItemLayout}>
                {getFieldDecorator('busiObjId')(
                  <Input disabled />
                )}
              </Form.Item>
            </Col>
            <Col span={1}>
              <Form.Item label="业务对象属性Id" {...formItemLayout}>
                {getFieldDecorator('busiObjAttrId')(
                  <Input disabled />
                )}
              </Form.Item>
            </Col>
            <Col span={1}>
              <Form.Item label="属性规格Id" {...formItemLayout}>
                {getFieldDecorator('attrId')(
                  <Input disabled />
                )}
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Spin>
    </Modal>
  );
}

export default connect(({ busiComponent }) => ({
  selectBusiElement: busiComponent.selectBusiElement,
  selectBusiObjAdd: busiComponent.selectBusiObjAdd,
  busiElementAddList: busiComponent.busiElementAddList,
  busiElementAddType: busiComponent.busiElementAddType
}))(Form.create()(BusiElementAdd));
